<script lang="jsx">
    export default defineComponent({
        props: {
            list: {
                type: Object,
                default: () => new Object()
            }
        },
        setup(props, { emit }) {
            const {list} = props
            const formData = reactive({})

            // 生成表单查询项
            const renderItem = () => {

                const setInputItem = (item) => {
                    const {code, type, label, config} = item
                    const placeholderDict = {
                        select: '请选择',
                        treeSelect: '请选择',
                        rangePicker: '请选择',
                    }

                    // 初始化表单项的配置
                    const setOptions = {
                        placeholder: (placeholderDict[type] ? placeholderDict[type] : '请输入') + label,
                        allowClear: true,
                        ...config,
                        onChange: (value) => {
                            formData[code] = value
                        }
                    }

                    let inputItem = null
                    switch (type) {
                        case 'select':
                            inputItem = <a-select model-value={formData[code]} {...setOptions}></a-select>
                            break;
                        case 'treeSelect':
                            inputItem = <a-tree-select model-value={formData[code]} {...setOptions}></a-tree-select>
                            break;
                        case 'rangePicker':
                            delete setOptions.placeholder
                            inputItem = <a-range-picker model-value={formData[code]} {...setOptions}></a-range-picker>
                            break;
                        default:
                            setOptions.onInput = (value) => {
                                formData[code] = value
                            }
                            delete setOptions.onChange
                            inputItem = <a-input model-value={formData[code]} {...setOptions}  />
                    }
                    return inputItem
                }

                return list.map(item => {
                    const {code, label} = item
                    return <a-form-item field={code} label={label}>
                        {setInputItem(item)}
                    </a-form-item>
                })

            }

            return {list, formData, $emit:emit, renderItem}
        },

        mounted() {
            this.setDefaultValue()
        },

        methods: {
            // 初始化表单项，如果有默认值， 设置默认值
            setDefaultValue() {
                this.list.forEach(item => {
                    const {code, defaultValue} = item
                    this.formData[code] = undefined
                    if (defaultValue) {
                        this.formData[code] = defaultValue
                    }
                })
            },

            // 查询
            query() {
                this.$emit('query' , this.formData)
            },
            // 重置
            reset() {
                this.setDefaultValue()
                this.query()
            }
        },
        render(createElement) {
            const {formData, renderItem} = createElement
            return (
                <div class="table_search">
                    <div class="search_form">
                        <div class="form_box">
                            <a-form model={formData} layout="inline">
                                { renderItem() }
                            </a-form>
                        </div>
                    </div>
                    <div class="search_btn">
                        <a-space>
                            <a-button type="primary" status="success" shape="round" onClick={() => {
                                this.query()
                            }}>查询
                            </a-button>
                            <a-button shape="round" onClick={() => {
                                this.reset()
                            }}>重置
                            </a-button>
                        </a-space>
                    </div>
                </div>
            )
        }
    })
</script>

<style lang="less" scoped>
    .table_search {
        display: flex;
        .search_form {
            flex: 1;
            display: flex;
            .form_box {
                flex: 1;
                ::v-deep{
                    .arco-select-view-single.arco-select-view-size-medium .arco-select-view-input,
                    .arco-select-view-single.arco-select-view-size-medium .arco-select-view-value,
                    .arco-input-wrapper .arco-input.arco-input-size-medium,
                    .arco-form-item-label-col > .arco-form-item-label{
                        font-size: .14rem;
                        min-height: .3rem;
                    }
                }
            }
            .more_item {
                padding: 0 .2rem;
                margin-right: .5rem;
            }
        }
    }

</style>